<html>
<head>
  <title>01html5与新特点</title>
  <basefont face="微软雅黑" size="2" />
  <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
  <meta name="exporter-version" content="Evernote Windows/307027 (zh-CN, DDL); Windows/6.1.0 (Win32);"/>
  <style>
    body, td {
      font-family: 微软雅黑;
      font-size: 10pt;
    }
  </style>
</head>
<body>
<a name="722"/>
<h1>01html5与新特点</h1>

<div>
<span><div><b><span style="color: rgb(28, 51, 135);"><span style="font-size: 32px;">新标记</span></span></b></div><div>&lt;nav&gt;（网站导航块）</div><div>&lt;footer&gt;</div><div>有利于搜索引擎的索引整理，同时更好的帮助小屏幕装置和视障人士使用。</div><div><br/></div><div>&lt;video&gt;：标签定义视频，比如电影片段或其他视频流</div><div>例： &lt;video src=&quot;movie.ogg&quot; controls=&quot;controls&quot;&gt;</div><div>          &lt;/video&gt;</div><div>     支持的视频格式：</div><div>               ogg = 带有 Thedora 视频编码和 Vorbis 音频编码的 Ogg 文件。</div><div>               mp4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件。</div><div><br/></div><div><br/></div><div>&lt;audio&gt;:标签定义声音，比如音乐或其他音频流</div><div>例： &lt;audio src=&quot;someaudio.wav&quot;&gt;</div><div>          &lt;/audio&gt;</div><div>     支持的音频格式：</div><div>               ogg vorbis , mp4 , wav</div><div><br/></div><div>&lt;canvas&gt;:标签定义图形，比如图表和其他图像</div><div style="margin-left:80px;">HTML5 的 canvas 元素使用 JavaScript 在网页上绘制图像。</div><div style="margin-left:80px;">画布是一个矩形区域，您可以控制其每一像素。</div><div style="margin-left:80px;">canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。</div><div><br/></div><div>例：&lt;canvas id=&quot;myCanvas&quot;&gt;&lt;/canvas&gt;</div><div>          &lt;script type=&quot;text/javascript&quot;&gt;</div><div>          var canvas=document.getElementByld('myCanvas');</div><div>          var ctx=canvas.getContext('2d');</div><div>          ctx.fillStyle='#FF0000';</div><div>          ctx.fillRect(0,0,80,100);</div><div>          &lt;/script&gt;</div><div><br/></div><div><br/></div><div><b><span style="color: rgb(28, 51, 135);"><span style="font-size: 32px;">新应用程序接口API</span></span></b></div><div>除了原先的 DOM 接口， HTML5 增加了更多 API,如：<br/>
1. 用于即时 2D 绘图的 Canvas 标签<br/>
2. 定时媒体回放<br/>
3. 离线数据库存储</div><div>4. 文档编辑</div><div>5. 拖拽控制</div><div>6. 浏览历史管理</div><div><br/></div><div>新的解析顺序新的元素： section, video, progress, nav, meter, time, aside, canvasinput</div><div>元素的新属性：日期和时间， email, url。</div><div>新的通用属性：ping, charset, async</div><div>全域属性：id, tabindex, repeat。</div><div>移除元素：center, font, strike。</div><div>HTML 5 有两大特点:</div><ul><li>首先，强化了 Web 网页的表现性能。除了可描绘二维图形外，还准备了用于播放视频和音频的标签。</li><li>其次，追加了本地数据库等 Web 应用的功能。</li></ul><div><br/></div><div><br/></div><div><span style="color: rgb(28, 51, 135);"><b><span style="font-size: 32px;">所有标记</span></b></span></div><div>按字母顺序排列的标签列表<br/>
?4: 指示在 HTML 4.01 中定义了该元素</div><div>?5: 指示在 HTML 5 中定义了该元素</div><div>标签 描述 4 5</div><div><br/></div><table style="-evernote-table:true;border-collapse:collapse;table-layout:fixed;margin-left:0px;width:100%;"><tr><td style="border-style:solid;border-width:1px;border-color:rgb(211,211,211);padding:10px;margin:0px;width:50.18315018315018%;"><div><br/></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;!--...--&gt; 定义注释。 4 5</div><div>&lt;!DOCTYPE&gt; 定义文档类型。 4 5</div><div>&lt;a&gt; 定义超链接。 4 5</div><div>&lt;abbr&gt; 定义缩写。 4 5</div><div>&lt;acronym&gt; HTML 5 中不支持。定义首字母缩写。 4</div><div>&lt;address&gt; 定义地址元素。 4 5</div><div>&lt;applet&gt; HTML 5 中不支持。定义 applet。 4</div><div>&lt;area&gt; 定义图像映射中的区域。 4 5</div><div>&lt;article&gt; 定义 article。 5</div><div>&lt;aside&gt; 定义页面内容之外的内容。 5</div><div>&lt;audio&gt; 定义声音内容。 5</div><div>&lt;b&gt; 定义粗体文本。 4 5</div><div>&lt;base&gt; 定义页面中所有链接的基准 URL。 4 5</div><div>&lt;basefont&gt; HTML 5 中不支持。请使用 CSS 代替。 4</div><div>&lt;bdo&gt; 定义文本显示的方向。 4 5</div><div>&lt;big&gt; HTML 5 中不支持。定义大号文本。 4</div><div>&lt;blockquote&gt; 定义长的引用。 4 5</div><div>&lt;body&gt; 定义 body 元素。 4 5</div><div>&lt;br&gt; 插入换行符。 4 5</div><div>&lt;button&gt; 定义按钮。 4 5</div><div>&lt;canvas&gt; 定义图形。 5</div><div>&lt;caption&gt; 定义表格标题。 4 5</div><div>&lt;center&gt; HTML 5 中不支持。定义居中的文本。 4</div><div>&lt;cite&gt; 定义引用。 4 5</div><div>&lt;code&gt; 定义计算机代码文本。 4 5</div><div>&lt;col&gt; 定义表格列的属性。 4 5</div><div>&lt;colgroup&gt; 定义表格列的分组。 4 5</div><div>&lt;command&gt; 定义命令按钮。 5</div><div>&lt;datalist&gt; 定义下拉列表。 5</div><div>&lt;dd&gt; 定义定义的描述。 4 5</div><div>&lt;del&gt; 定义删除文本。 4 5</div><div>&lt;details&gt; 定义元素的细节。 5</div><div>&lt;dfn&gt; 定义定义项目。 4 5</div><div>&lt;dir&gt; HTML 5 中不支持。定义目录列表。 4</div><div>&lt;div&gt; 定义文档中的一个部分。 4 5</div><div>&lt;dl&gt; 定义定义列表。 4 5</div><div>&lt;dt&gt; 定义定义的项目。 4 5</div><div>&lt;em&gt; 定义强调文本。 4 5</div><div>&lt;embed&gt; 定义外部交互内容或插件。 5</div><div>&lt;fieldset&gt; 定义 fieldset。 4 5</div><div>&lt;figcaption&gt; 定义 figure 元素的标题。 5</div><div>&lt;figure&gt; 定义媒介内容的分组，以及它们的标题。 5</div><div>&lt;font&gt; HTML 5 中不支持。 4</div><div>&lt;footer&gt; 定义 section 或 page 的页脚。 5</div><div>&lt;form&gt; 定义表单。 4 5</div><div>&lt;frame&gt; HTML 5 中不支持。定义子窗口（框架）。 4</div><div>&lt;frameset&gt; HTML 5 中不支持。定义框架的集。 4</div><div>&lt;h1&gt; to &lt;h6&gt; 定义标题 1 到标题 6。 4 5</div><div>&lt;head&gt; 定义关于文档的信息。 4 5</div><div>&lt;header&gt; 定义 section 或 page 的页眉。 5</div><div>&lt;hgroup&gt; 定义有关文档中的 section 的信息。 5</div><div>&lt;hr&gt; 定义水平线。 4 5</div><div>&lt;html&gt; 定义 html 文档。 4 5</div><div>&lt;i&gt; 定义斜体文本。 4 5</div><div>&lt;iframe&gt; 定义行内的子窗口（框架）。 4 5</div><div>&lt;img&gt; 定义图像。 4 5</div><div>&lt;input&gt; 定义输入域。 4 5</div><div>&lt;ins&gt; 定义插入文本。 4 5</div></div><div><br/></div></td><td style="border-style:solid;border-width:1px;border-color:rgb(211,211,211);padding:10px;margin:0px;width:49.633699633699635%;"><div><span style="font-size: 12px;"><span style="font-family: Monaco, Menlo, Consolas, 'Courier New', monospace;"><span style="color: rgb(51, 51, 51);"><br/></span></span></span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div>&lt;keygen&gt; 定义生成密钥。 5</div><div>&lt;isindex&gt; HTML 5 中不支持。定义单行的输入域。 4</div><div>&lt;kbd&gt; 定义键盘文本。 4 5</div><div>&lt;label&gt; 定义表单控件的标注。 4 5</div><div>&lt;legend&gt; 定义 fieldset 中的标题。 4 5</div><div>&lt;li&gt; 定义列表的项目。 4 5</div><div>&lt;link&gt; 定义资源引用。 4 5</div><div>&lt;map&gt; 定义图像映射。 4 5</div><div>&lt;mark&gt; 定义有记号的文本。 5</div><div>&lt;menu&gt; 定义菜单列表。 4 5</div><div>&lt;meta&gt; 定义元信息。 4 5</div><div>&lt;meter&gt; 定义预定义范围内的度量。 5</div><div>&lt;nav&gt; 定义导航链接。 5</div><div>&lt;noframes&gt; HTML 5 中不支持。定义 noframe 部分。 4</div><div>&lt;noscript&gt; 定义 noscript 部分。 4 5</div><div>&lt;object&gt; 定义嵌入对象。 4 5</div><div>&lt;ol&gt; 定义有序列表。 4 5</div><div>&lt;optgroup&gt; 定义选项组。 4 5</div><div>&lt;option&gt; 定义下拉列表中的选项。 4 5</div><div>&lt;output&gt; 定义输出的一些类型。 5</div><div>&lt;p&gt; 定义段落。 4 5</div><div>&lt;param&gt; 为对象定义参数。 4 5</div><div>&lt;pre&gt; 定义预格式化文本。 4 5</div><div>&lt;progress&gt; 定义任何类型的任务的进度。 5</div><div>&lt;q&gt; 定义短的引用。 4 5</div><div>&lt;rp&gt; 定义若浏览器不支持 ruby 元素显示的内容。 5</div><div>&lt;rt&gt; 定义 ruby 注释的解释。 5</div><div>&lt;ruby&gt; 定义 ruby 注释。 5</div><div>&lt;s&gt; HTML 5 中不支持。定义加删除线的文本。 4</div><div>&lt;samp&gt; 定义样本计算机代码。 4 5</div><div>&lt;script&gt; 定义脚本。 4 5</div><div>&lt;section&gt; 定义 section。 5</div><div>&lt;select&gt; 定义可选列表。 4 5</div><div>&lt;small&gt; 定义小号文本。 4 5</div><div>&lt;source&gt; 定义媒介源。 5</div><div>&lt;span&gt; 定义文档中的 section。 4 5</div><div>&lt;strike&gt; HTML 5 中不支持。定义加删除线的文本。 4</div><div>&lt;strong&gt; 定义强调文本。 4 5</div><div>&lt;style&gt; 定义样式定义。 4 5</div><div>&lt;sub&gt; 定义下标文本。 4 5</div><div>&lt;summary&gt; 定义 details 元素的标题。 5</div><div>&lt;sup&gt; 定义上标文本。 4 5</div><div>&lt;table&gt; 定义表格。 4 5</div><div>&lt;tbody&gt; 定义表格的主体。 4 5</div><div>&lt;td&gt; 定义表格单元。 4 5</div><div>&lt;textarea&gt; 定义 textarea。 4 5</div><div>&lt;tfoot&gt; 定义表格的脚注。 4 5</div><div>&lt;th&gt; 定义表头。 4 5</div><div>&lt;thead&gt; 定义表头。 4 5</div><div>&lt;time&gt; 定义日期/时间。 5</div><div>&lt;title&gt; 定义文档的标题。 4 5</div><div>&lt;tr&gt; 定义表格行。 4 5</div><div>&lt;tt&gt; HTML 5 中不支持。定义打字机文本。 4</div><div>&lt;u&gt; HTML 5 中不支持。定义下划线文本。 4</div><div>&lt;ul&gt; 定义无序列表。 4 5</div><div>&lt;var&gt; 定义变量。 4 5</div><div>&lt;video&gt; 定义视频。 5</div><div>&lt;xmp&gt; HTML 5 中不支持。定义预格式文本。 4</div></div><div><br/></div></td></tr></table><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><span style="color: rgb(28, 51, 135);"><b><span style="font-size: 32px;">HTML 5 Web 存储</span></b></span></div><div><span style="font-size: 16px;">HTML 5 提供了两种在客户端存储数据的新方法：</span></div><ul><li><span style="font-size: 16px;">localStorage - 没有时间限制的数据存储</span></li><li><span style="font-size: 16px;">sessionStorage - 针对一个 session 的数据存储</span></li></ul><div><span style="font-size: 16px;">HTML 5 使用 JavaScript 来存储和访问数据。</span></div><div><span style="font-size: 16px;"><br/></span></div><div><b><span style="color: rgb(65, 0, 125);"><span style="font-size: 19px;">localStorage 方法</span></span></b></div><div><span style="font-size: 16px;">localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后，数据依然可用。</span></div><div><span style="font-size: 19px;"><span style="font-size: 16px;">创建和访问 localStorage：</span></span></div><div><span style="font-size: 16px;">例：</span></div><div><span style="font-size: 16px;">     &lt;script type=&quot;text/javascript&quot;&gt;</span></div><div><span style="font-size: 16px;">     localStorage.lastname=&quot;Smith&quot;;</span></div><div><span style="font-size: 16px;">     document.write(localStorage.lastname);</span></div><div><span style="font-size: 16px;">     &lt;/script&gt;</span></div><ul><li><span style="font-size: 16px;">对用户访问页面的次数进行计数</span><br style="font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; orphans: 2; text-align: -webkit-auto; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px;"/></li></ul><div><br/></div><div><b><span style="color: rgb(65, 0, 125);"><span style="font-size: 19px;">sessionStorage 方法</span></span></b></div><div><span style="font-size: 16px;">sessionStorage 方法针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。</span></div><ul><li><span style="color: rgb(173, 0, 0);"><b><span style="font-size: 16px;">创建并访问一个 sessionStorage</span></b></span></li></ul><div>    <span style="font-size: 16px;"> 实例</span></div><div style="-en-codeblock: true; box-sizing: border-box; padding: 8px; font-family: Monaco, Menlo, Consolas, &quot;Courier New&quot;, monospace; font-size: 12px; color: rgb(51, 51, 51); border-top-left-radius: 4px; border-top-right-radius: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; background-color: rgb(251, 250, 248); border: 1px solid rgba(0, 0, 0, 0.14902); background-position: initial initial; background-repeat: initial initial;"><div style="margin-left:40px;">&lt;script type=&quot;text/javascript&quot;&gt;</div><div style="margin-left:40px;">sessionStorage.lastname=&quot;Smith&quot;;</div><div style="margin-left:40px;">document.write(sessionStorage.lastname);</div><div style="margin-left:40px;">&lt;/script&gt;<br/></div></div><div style="margin-left:40px;"><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div><div><br/></div></span>
</div></body></html> 